<template>
    <div class="container">
        <h1>JS 反编译工具</h1>
        <div class="editor-area">
            <div class="input-area">
                <h2>输入 Webpack 打包的 JS 代码</h2>
                <textarea v-model="inputJs" placeholder="粘贴 webpack 打包的 JS 代码..."></textarea>
                <button @click="decompile">反编译</button>
            </div>
            <div class="output-area">
                <h2>反编译结果</h2>
                <div class="tabs">
                    <button v-for="tab in tabs" :key="tab" :class="{ active: activeTab === tab }"
                        @click="activeTab = tab">
                        {{ tab }}
                    </button>
                </div>
                <div class="output-content">
                    <pre v-if="activeTab === 'Component'">{{ output.component }}</pre>
                    <pre v-if="activeTab === 'Template'">{{ output.template }}</pre>
                    <pre v-if="activeTab === 'Style'">{{ output.style }}</pre>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const inputJs = ref('')
const output = ref({
    component: '',
    template: '',
    style: ''
})
const tabs = ['Component', 'Template', 'Style']
const activeTab = ref('Component')

const decompile = async () => {
    if (!inputJs.value.trim()) {
        alert('请输入要反编译的 JS 代码')
        return
    }

    try {
        const result = await window.electronAPI.decompileJs(inputJs.value)
        output.value = {
            component: result.componentCode,
            template: result.templateCode,
            style: result.styleCode
        }
    } catch (error) {
        console.error('反编译失败:', error)
        alert('反编译失败，请检查输入代码')
    }
}
</script>

<style>
/* 样式代码省略 */
</style>